{% extends "base.html" %}

{% block title %}{{ device.name }} - 详细报表{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- 设备概览卡片 -->
    <div class="card mb-4 shadow">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <div>
                <h4 class="mb-1">{{ device.name }}</h4>
                <small class="opacity-75">
                    <i class="bi bi-ip"></i> {{ device.ip }} | 
                    <i class="bi bi-clock-history"></i> 最后在线: {{ device.last_seen.strftime('%Y-%m-%d %H:%M') if device.last_seen else '从未在线' }}
                </small>
            </div>
            <div>
                <span class="badge bg-{% if device.status == '在线' %}success{% else %}secondary{% endif %}">
                    {{ device.status }}
                </span>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="d-flex align-items-center">
                        <div class="bg-info bg-opacity-10 p-3 rounded me-3">
                            <i class="bi bi-cpu text-info" style="font-size: 1.5rem;"></i>
                        </div>
                        <div>
                            <h6 class="mb-0">当前CPU</h6>
                            <h3 class="mb-0">{{ device.cpu_usage }}%</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <!-- 可添加内存/带宽等其他指标 -->
                </div>
                <div class="col-md-4 text-end">
                    <a href="{{ url_for('edit_device', id=device.id) }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-pencil"></i> 编辑配置
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- CPU历史图表 -->
    <div class="card mb-4 shadow">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="bi bi-graph-up"></i> CPU使用率历史</h5>
        </div>
        <div class="card-body">
            <div id="cpuChart" style="height: 350px;"></div>
            <div class="mt-3 form-check form-switch">
                <input class="form-check-input" type="checkbox" id="smoothLine" checked>
                <label class="form-check-label" for="smoothLine">平滑曲线</label>
            </div>
        </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="card shadow">
        <div class="card-header bg-light">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#cpu-tab" data-bs-toggle="tab">CPU记录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#alerts-tab" data-bs-toggle="tab">告警记录</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="cpu-tab">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>记录时间</th>
                                    <th>CPU使用率</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for point in history %}
                                <tr>
                                    <td>{{ point.timestamp.strftime('%m-%d %H:%M') }}</td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar 
                                                {% if point.cpu_usage > 90 %}bg-danger
                                                {% elif point.cpu_usage > 70 %}bg-warning
                                                {% else %}bg-success{% endif %}" 
                                                role="progressbar" 
                                                style="width: {{ point.cpu_usage }}%"
                                                aria-valuenow="{{ point.cpu_usage }}" 
                                                aria-valuemin="0" 
                                                aria-valuemax="100">
                                                {{ point.cpu_usage }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        {% if point.cpu_usage > 90 %}
                                        <span class="badge bg-danger">严重</span>
                                        {% elif point.cpu_usage > 70 %}
                                        <span class="badge bg-warning">警告</span>
                                        {% else %}
                                        <span class="badge bg-success">正常</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="alerts-tab">
                    <!-- 告警记录内容 -->
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> 告警记录功能正在开发中
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
<!-- 加载ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

<script>
// 初始化CPU图表
function initCPUChart() {
    const chartDom = document.getElementById('cpuChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>CPU: {c}%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {{ timestamps | tojson | safe }},
            axisLabel: {
                rotate: 45
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}%'
            },
            max: 100
        },
        series: [{
            name: 'CPU使用率',
            type: 'line',
            smooth: true,
            data: {{ cpu_data | tojson | safe }},
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(58, 77, 233, 0.8)'
                    }, {
                        offset: 1,
                        color: 'rgba(58, 77, 233, 0.1)'
                    }]
                }
            },
            markPoint: {
                data: [
                    { type: 'max', name: '峰值' },
                    { type: 'min', name: '谷值' }
                ]
            },
            lineStyle: {
                width: 3
            }
        }]
    };

    myChart.setOption(option);
    
    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    
    // 平滑曲线切换
    document.getElementById('smoothLine').addEventListener('change', function() {
        const option = myChart.getOption();
        option.series[0].smooth = this.checked;
        myChart.setOption(option);
    });
}

document.addEventListener('DOMContentLoaded', initCPUChart);
</script>
{% endblock %}
{% endblock %}